import React from 'react';
import ImageList from '@material-ui/core/ImageList';
import ImageListItem from '@material-ui/core/ImageListItem';
import { makeStyles } from '@material-ui/core/styles';
import { Btn, is_empty } from 'sui';

const useStyles = makeStyles((theme) => ({
    root: {
        display: 'flex',
        flexWrap: 'wrap',
        justifyContent: 'space-around',
        overflow: 'hidden',
        backgroundColor: theme.palette.background.paper,
    },
    imageList: {
        flexWrap: 'nowrap',
        transform: 'translateZ(0)',
    },
}));

const Img = ({ src, alt, className }) => {
    return (
        <img className={"m-2 " + className} src={src} alt={alt || "empty"}/>
    );
}

const BtImg = ({ src, alt, hcmd, name, children }) => {
    return (
        <Btn
            className="bg-blue-800"
            name={name}
            hcmd={() => hcmd(name)}>
            <Img src={src} className="w-px-200 h-px-200"/>
            <div className={"font-bold text-2xl mb-6 text-white"}>
                {children}
            </div>
        </Btn>
    );
};

/**
 * data = ["a.png"];
 */
const ImgList = ({ data, row="auto", col=2.5 }) => {
    const classes = useStyles();

    if (is_empty(data)) {
        return null;
    }

    return (
        <div className={classes.root}>
            <ImageList className={classes.imageList} cols={col} rowHeight={row}>
                {data.map((item) => (
                    <ImageListItem key={item}>
                        <img src={item} alt="empty" />
                    </ImageListItem>
                ))}
            </ImageList>
        </div>
    );
};

export {ImgList, BtImg, Img};
